import { PropType, defineComponent } from 'vue';
import useModule from './index.module';
import styles from './index.module.scss';
import CompareControl from './components/compareControl';
import {
  ModeEnum,
  OutputFormatEnum,
  LanguageEnum
} from './data/type';
export default defineComponent({
  name: 'DiffCompare',
  props: {
    /**
     * 模式
     * 字符 => char,
     * 单词 => word,
     * 图像 => image,
     * 文件 => file
     */
    mode: {
      type: String as PropType<ModeEnum>,
      default: ModeEnum.WORD
    },
    /**
     * 是否以弹窗模式展示内容
     */
    dialog: {
      type: Boolean,
      default: false
    },
    /**
     * 此属性被赋值的话，则代表是以接口的形式赋值，不开放EditDiv
     */
    value: {
      type: Object as PropType<{
        before: string,
        after: string
      }>,
      default: () => null
    },
    /**
     * 输出格式：只在mode为multiLine时生效
     */
    outputFormat: {
      type: String as PropType<OutputFormatEnum>,
      default: OutputFormatEnum.SIDE_BY_SIDE
    },
    /**
     * 输出语言：只在mode为multiLine时生效
     */
    language: {
      type: String as PropType<LanguageEnum>,
      default: LanguageEnum.PLAINTEXT
    },
    /** 去除空白字符 */
    trim: {
      type: Boolean,
      default: false
    },
    /** 最大高度 */
    maxHeight: {
      type: String,
      default: undefined
    },
    /** 文件名 */
    filename: {
      type: String,
      default: undefined
    },
    /** 相同部分的代码，最多显示的行数 */
    context: {
      type: [Number, String],
      default: 10
    }
  },
  setup(props) {
    const {
      dialogConfig
    } = useModule();
    return () => (
      <div class={styles.resourceProduct}>
        {
          !props.dialog ? <CompareControl
            {
              ...{
                attrs: {
                  mode: props.mode,
                  value: props.value,
                  outputFormat: props.outputFormat,
                  language: props.language,
                  trim: props.trim,
                  maxHeight: props.maxHeight,
                  filename: props.filename,
                  context: props.context
                }
              }
            }
          /> : <div>
            <linpengDialog
              v-el-drag-dialog
              page={dialogConfig}
              append-to-body={true}
              close-on-click-modal={false}
              modal-append-to-body={true}
              class={styles.editorDialog}
            >
              <CompareControl
                {
                  ...{
                    attrs: {
                      mode: props.mode,
                      value: props.value,
                      outputFormat: props.outputFormat,
                      language: props.language,
                      trim: props.trim,
                      maxHeight: props.maxHeight,
                      filename: props.filename,
                      context: props.context
                    }
                  }
                }
              />
            </linpengDialog>
          </div>
        }
      </div>
    )
  }
})
